<template>
  <div class="auth">
    <div class="bg"></div>
    <div class="title-info">
      <img src="../../assets/imgs/booklogo.png" alt="" />
      <h2 class="title">图书管理系统 后台</h2>
    </div>

    <div class="form">
      <el-tabs v-model="activeName">
        <!-- 登陆表单界面 -->
        <el-tab-pane label="登陆" name="1">
          <div class="item">
            <el-input placeholder="用户名">
              <template #prefix>
                <el-icon class="el-input__icon"><user /></el-icon>
              </template>
            </el-input>
          </div>
          <div class="item">
            <el-input placeholder="密码" >
                <template #prefix>
                    <el-icon class="el-input__icon"><lock /></el-icon>
                </template>
            </el-input>
          </div>
          <div class="item">
            <a href="">忘记密码</a>
          </div>
          <div class="item">
            <el-button type="primary">登陆</el-button>
          </div>
        </el-tab-pane>
        <!-- 注册表单界面 -->
        <el-tab-pane label="注册" name="2"> 
          <div class="item">
            <el-input placeholder="用户名">
              <template #prefix>
                <el-icon class="el-input__icon"><user /></el-icon>
              </template>
            </el-input>
          </div>
          <div class="item">
            <el-input placeholder="密码" >
                <template #prefix>
                    <el-icon class="el-input__icon"><lock /></el-icon>
                </template>
            </el-input>
          </div>
          <div class="item">
            <el-input placeholder="邀请码">
              <template #prefix>
                    <el-icon class="el-input__icon"><message /></el-icon>
                </template>
            </el-input>
          </div>
          <div class="item">
            <el-button type="primary">注册</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script src="./index.js"></script>

<style lang="scss" scoped>
@import "./index.scss";
</style>